<template>
  <!-- 添加api -->
  <view>
    <view>
      <u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
        inactive-color="#8a95b3" swiperWidth="750" bg-color="#000000" active-color="#FFFFFF"></u-tabs-swiper>
    </view>
    <swiper :current="swiperCurrent" style="height: 100vh;" @transition="transition" @animationfinish="animationfinish">
      <!-- 添加api -->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y="true" style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
          <view class="tishi">
            通过Vtrading专属链接注册交易所账户可享高额交易奖励
          </view>
          <view class="addapi">
            <view class="addapi-left">
              <image src="../../static/active-home.png" mode=""></image>
              <view class="text-center">
                <text class="addapi-title">huobi</text>
                <text>支持币币，usdt本位合约交易</text>
              </view>
            </view>
            <view class="" @click="addapidetail">
              <uni-icons size="24" color="#FFFFFF" type="plusempty"></uni-icons>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
      <!-- 交易所开户 -->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
          <view class="addapi">
            <view class="addapi-left">
              <image src="../../static/active-home.png" mode=""></image>
              <view class="text-center">
                <text class="addapi-title">huobi</text>
                <text>支持币币，usdt本位合约交易</text>
              </view>
            </view>
            <view class="">
              <button type="primary" size="mini">开户</button>
            </view>
          </view>

        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        background: {
          backgroundColor: '#001f3f',
        },
        list: [{
          name: '添加api'
        }, {
          name: '交易所开户'
        }],
        // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
        current: 0, // tabs组件的current值，表示当前活动的tab选项
        swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
        listcon: [{
          title: 'vtn价格上调公告',
          content: 'vtn价格上调公告',
          time: '2014/04/23 12:23'
        }, {
          title: 'vtn价格上调公告',
          content: 'vtn价格上调公告',
          time: '2014/04/23 12:23'
        }, {
          title: 'vtn价格上调公告',
          content: 'vtn价格上调公告',
          time: '2014/04/23 12:23'
        }, {
          title: 'vtn价格上调公告',
          content: 'vtn价格上调公告',
          time: '2014/04/23 12:23'
        }]
      }
    },
    onShow() {
      this.swiperCurrent=getApp().globalData.swiperCurrent
      console.log(this.swiperCurrent)
      console.log(getApp().globalData.swiperCurrent)
    },
    onLoad() {
      // this.current=1
    },
    methods: {
      // tabs通知swiper切换
      tabsChange(index) {
        this.swiperCurrent = index;
      },
      // swiper-item左右移动，通知tabs的滑块跟随移动
      transition(e) {
        let dx = e.detail.dx;
        this.$refs.uTabs.setDx(dx);
      },
      // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
      // swiper滑动结束，分别设置tabs和swiper的状态
      animationfinish(e) {
        let current = e.detail.current;
        this.$refs.uTabs.setFinishCurrent(current);
        this.swiperCurrent = current;
        this.current = current;
      },
      // scroll-view到底部加载更多
      onreachBottom() {

      },
      // 添加api
      addapidetail() {
        uni.navigateTo({
          url: '../addapidetail/addapidetail'
        })
      }
    }
  }
</script>

<style>
  .addapi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120rpx;
    padding: 10rpx 20rpx;
    color: #7e8393;
    border-bottom: 1px solid #202022;
  }

  .addapi image {
    width: 90rpx;
    height: 90rpx;
    margin-right: 20rpx;
  }

  .addapi-left {
    display: flex;
    justify-content: flex-start;
  }

  .text-center {
    display: flex;
    flex-direction: column;
  }

  .addapi-title {
    font-size: 36rpx;
    color: #FFFFFF;
  }

  .tishi {
    font-size: 24rpx;
    color: #a4afcb;
    padding: 10rpx 20rpx;
    background-color: #1e2c47;
    margin: 30rpx 10rpx;
  }
</style>
